<script setup>
import { ref,reactive, onMounted ,watch} from 'vue'
import {useRouter} from 'vue-router';
import {index,del,edit,send} from '@/api/order.js';
import { ElMessage, ElMessageBox } from 'element-plus'

const state = reactive({
  orders:[],
  total:0,
  form:{},
  search:{},
  page:1,
  state:[
	  {id:1,name:"待发货"},
	  {id:2,name:"待提货"},
	  {id:3,name:"已提货"},
	  {id:4,name:"已完成"},
  ]
});
const router = useRouter();
const visible = ref(false);
const pageSize = ref(10);
const currentPage =ref(1);

onMounted(()=>{
 	 loadData();
});
const loadData = ()=>{
	let params = {};
		params.page = currentPage.value;
		params.pageSize = pageSize.value;
		params.sn = state.search.sn;
		params.date_time = state.search.date_time;
		params.state = state.search.state;
	index(params).then(res=>{
	  state.orders = res.data.data;
	  state.total = res.data.total;
	});
}
watch(currentPage,()=>{
	loadData();
})
const handleDel =(index,row)=>{
  ElMessageBox.confirm(
      "确认删除?",
      "删除提示",
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(()=>{
       del({id:row.id}).then(res=>{
          if(res.code == 200) {

              ElMessage({
                type: 'success',
                message: '删除成功',
              })

          } 
        })

    });
   
}
const onSubmit = ()=>{
    let data = {};
        data.id  = state.form.id;
        data.sn = state.form.sn;
        data.state = state.form.state;
    edit(data).then(res=>{

    })
}
const handleEdit = (index,row)=>{
  state.form = row;
  visible.value = true;

}
const  handleSend=(index,row) => {
  ElMessageBox.confirm(
    "确认发货？",
    "发货提示",
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
  }
  ).then(()=>{
    send({id:row.id}).then(res=>{
		if(res.code == 200) {
			ElMessage({
				"message":"发货成功",
				"type":"success"
			});
			
			loadData();
		}
	})
 });
  
}
const toOrderDetail=(row) => {
		router.push('/order/detail?id='+row.id);
}
const onSearch=()=>{
	loadData();
}
</script>

<template>
 <el-row class="">
	 
	 <el-form :inline="true" :model="state.search" label-width="120px" class="demo-form-inline">
	     <el-form-item label="订单号">
	       <el-input v-model="state.search.sn" />
	     </el-form-item>
		 <el-form-item label="订单状态">
		 			  <el-select v-model="state.search.state" placeholder="请选择" size="large">
		 						  <el-option  
		 						   label="请选择"
		 						   value="0" />
		 			    <el-option  v-for="item in state.state"
		 			     :label="item.name"
		 			     :value="item.id"
		 			     :key="item.id" />
		 			  </el-select>
		 </el-form-item>
		 <el-form-item label="日期">
			   <el-date-picker
			        v-model="state.search.date_time"
			        type="datetimerange"
			        range-separator="To"
					value-format="YYYY-MM-DD HH:mm:ss"
			        start-placeholder="开始时间"
			        end-placeholder="结束日期"
			      />
		 </el-form-item>
		
		  <el-form-item>
		       <el-button type="primary" @click="onSearch">搜索</el-button>
		     </el-form-item>
	</el-form>
  <!--   <el-button type="primary" @click="edit">修改</el-button>
    <el-button type="danger" @click="del">删除</el-button> -->
  </el-row>
   <el-table :data="state.orders" stripe style="width: 100%">
    <el-table-column type="selection" width="55" />
       <el-table-column fixed prop="id" label="ID" width="150" />
       <el-table-column  prop="sn" label="订单号" width="150" />
       <el-table-column label="用户" width="150">
         <template #default="scope">
          <div>{{scope.row.user.user_name}}</div>
         </template>
       </el-table-column>

       <el-table-column label="产品" width="150">
         <template #default="scope">
          <div v-for="item in scope.row.products" class="product_item">
              {{item.name}}
              <el-image
                style="width: 50px; height: 50px"
                :src="item.image" />
          </div>
         </template>
       </el-table-column>
       <el-table-column  prop="created_at" label="创建时间" width="180" />
       <el-table-column label="订单状态" width="150">
         <template #default="scope">
          <el-tag v-if="scope.row.state == 1" class="ml-2" type="primary">待发货</el-tag>
          <el-tag v-if="scope.row.state == 2" class="ml-2" type="success">待提货</el-tag>
          <el-tag v-if="scope.row.state == 3" class="ml-2" type="primary">已提货</el-tag>
          <el-tag v-if="scope.row.state == 4" class="ml-2" type="success">已完成</el-tag>
         </template>
       </el-table-column>
        <el-table-column fixed="right" label="操作" >
          <template #default="scope">
			<el-button link type="primary" size="small" @click="toOrderDetail(scope.row)">详情</el-button>
            <el-button link type="primary" size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
            <el-button link type="success" v-if="scope.row.state ==1" size="small" @click="handleSend(scope.$index,scope.row)">发货</el-button>
            <el-button link type="danger"  size="small" @click="handleDel(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>

  </el-table>
 <el-pagination background layout="prev, pager, next" 
   :total="state.total"   
   v-model:currentPage="currentPage"
   v-model:page-size="pageSize"
   />
    <el-dialog v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">修改订单!</h4>
        
      </div>
    </template>
      <el-form :model="state.form" label-width="120px">
            <el-form-item label="订单号">
              <el-input v-model="state.form.sn" />
            </el-form-item>
             <el-form-item label="订单价格">
              <el-input v-model="state.form.total" />
            </el-form-item>
             <el-form-item label="订单状态">
                 <el-radio-group v-model="state.form.state" class="ml-4">
                    <el-radio :label="1" size="large">待提货</el-radio>
                    <el-radio :label="2" size="large">已提货</el-radio>
                </el-radio-group>
               </el-form-item>
          </el-form>
       <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button type="danger" @click="visible = false">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          关闭
        </el-button>
      </el-form-item>
  </el-dialog>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
